<template>
  <div class="main-recommend">
      <nav-bar class="reco-nav">
            <div slot="left">
                <router-link to="/">
                    <img src="~assets/img/common/back.png" alt="">    
                </router-link>
                
            </div>
        <div slot="center">FangMall</div>
        </nav-bar>
        <scroll class="reco-content">
            <div class="reco-img">
                <img src="https://s11.mogucdn.com/mlcdn/c45406/180706_65d5gca6k961jg5e4ffa0ald86ibd_750x390.jpg_999x999.v1c0.81.webp" alt="">
            </div>
            <div class="reco-list">
                <div class="reco-div-p">
                    <p class="reco-p">热销榜单</p>
                </div>
                
                <tab-control class="tab-control" 
                :titles="['流行','新款','精选']" 
                @tabClick="tabClick"
                v-if="showTab"></tab-control>
                <goods-list :goods="showGood" class="good-list"></goods-list>
            </div>
        </scroll>
        <back-top></back-top>
      
  </div>
</template>

<script>
import NavBar from 'components/common/navbar/NavBar.vue';
import TabControl from 'components/content/tabControl/TabControl';
import GoodsList from 'components/content/goods/GoodsList';
import Scroll from 'components/common/scroll/Scroll';
import BackTop from 'components/content/backTop/BackTop';

import { getHomeGoods } from 'network/home.js';

export default {
    name: 'recommend',
    components: {
        NavBar,
        TabControl,
        GoodsList,
        Scroll,
        BackTop,
    },
    data() {
       return {
          goods: {
            'pop': {page: 0,list:[]},
            'new': {page: 0,list:[]},
            'sell': {page: 0,list:[]},
          },
          // 定义type用来存储点击到的类型 默认值pop
          currentType: 'pop',
          showTab: false,
        }
    },
    computed: {
        showGood() {
          return this.goods[this.currentType].list
        }
      },
    created() {
      this.getHomeGoods('pop')
      this.getHomeGoods('new')
      this.getHomeGoods('sell')
    },
    mounted() {
        //scroll事件监听
        window.addEventListener("scroll", this.showtab,true);
    },
    methods: {
        tabClick(index) {
          switch(index) {
            case 0:
              this.currentType = 'pop'
              break
            case 1:
              this.currentType = 'new'
              break
            case 2:
              this.currentType = 'sell'
              break
          }
        },
        showtab() {
        let that = this;
        //获取滚动距离
        let scrollTop =
          window.pageYOffset ||
          document.documentElement.scrollTop ||
          document.body.scrollTop;
        that.scrollTop = scrollTop;
        //当滚动距离大于240 出现导航栏
        if (scrollTop > 240) {
            this.showTab = true;
        } else {
            this.showTab = false;
        }
      },

        //网络请求
        getHomeGoods(type) {
        const page = this.goods[type].page + 1
        getHomeGoods(type,page).then(res => {
          // console.log(res);
          // 不能这样使用 新的数组添加会覆盖之前添加的
          // this.goods.pop.list = res.data.list
          this.goods[type].list.push(...res.data.list)
          this.goods[type].page += 1
        })
      }
    }
}
</script>

<style scoped>
    .main-recommend {
        width: 100%;
        /* height: 100vh; */
        padding-top: 44px;
        position: relative;
        height: 100%;
        z-index: 20;
        /* background-color: lightskyblue; */
    }
    .reco-nav {
    /* background-color: var(--color-tint); */
    /* background-color: rgb(122, 217, 248); */
        background-color: lightblue;
        color: #fff;

        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        z-index: 9;
  }
  .reco-nav img{
    margin-top: 8px;
    margin-left: -15px;
    width: 30px;
    height: 30px;
  }
  .reco-content {
    /* height: 300px; */
    /* overflow: hidden; */
    position: absolute;
    top: 44px;
    bottom: 49px;
    left: 0;
    right: 0;
    /* height: calc(100% - 93px);
    margin-top: 44px; */
  }
  .reco-img img {
      width: 100%;
  }
  .reco-list {
      /* position: absolute; */
      margin-top: -3px;
      background-color: lightpink;
  }
  .reco-div-p {
      width: 100%;
      height: 44px;
      background-color:rgb(255, 147, 163);
  }
  .reco-p {
      height: 44px;
      line-height: 44px;
      font-size: 28px;
      color: #eee;
      font-weight: bold;
      text-align: center;
  }
  
  .tab-control {
    position: sticky;
    /* position: relative; */
    top: 44px;
    z-index: 9;
  }
  .good-list {
    margin-top: 10px;
  }
</style>